<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { updateReturnApply } from '@/api/material-receipt';

  const form = ref({
    returnStatus: '',
    wmsReturnApplyId: '',
    returnType: '',
    returnQty: '',
    accordingNo: '',
    appearanceStatus: '',
    equipStatus: '',
    remark: '',
    ynWorkLineFlag: '',
    failureDesc: '',
  });
  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      // showDrawer.value = newValue;
      showDrawer.value = false;
    }
  );
  watch(
    () => booleanStore.row,
    () => {
      form.value = {
        returnStatus: booleanStore.row.returnStatus,
        wmsReturnApplyId: booleanStore.row.wmsReturnApplyId,
        returnType: booleanStore.row.returnType,
        returnQty: booleanStore.row.returnQty,
        accordingNo: booleanStore.row.accordingNo,
        appearanceStatus: booleanStore.row.appearanceStatus,
        equipStatus: booleanStore.row.equipStatus,
        remark: booleanStore.row.remark,
        ynWorkLineFlag: booleanStore.row.ynWorkLineFlag,
        failureDesc: booleanStore.row.failureDesc,
      };
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool2(0);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool2(0);
  }
  async function handleOk() {
    const data = await updateReturnApply(form.value);

    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool2(0);
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool2(0);
    }
    // booleanStore.watchUpdate();
  }
</script>

<template>
  <a-drawer
    :width="600"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 退库单修改 </template>
    <div>
      <a-form :model="form" :style="{ width: '450px' }">
        <a-form-item field="name" label="退库状态：">
          <a-select v-model="form.returnStatus" placeholder="退库状态：">
            <a-option value="1">类型一</a-option>
            <a-option value="2">类型二</a-option>
            <a-option value="3">故障单退库</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="name" label="所在单位：">
          <a-input v-model="form.wmsReturnApplyId" placeholder="所在单位" />
        </a-form-item>
        <a-form-item field="name" label="退库类型：">
          <a-input v-model="form.returnType" placeholder="退库类型" />
        </a-form-item>
        <a-form-item field="name" label="退库数量：">
          <a-input v-model="form.returnQty" placeholder="退库数量" />
        </a-form-item>
        <a-form-item field="name" label="退库依据:">
          <a-input v-model="form.accordingNo" placeholder="退库依据" />
        </a-form-item>
        <a-form-item field="name" label="配套状态">
          <a-input v-model="form.appearanceStatus" placeholder="实物配套状态" />
        </a-form-item>
        <a-form-item field="name" label="外观状态：">
          <a-input v-model="form.equipStatus" placeholder="实物外观状态" />
        </a-form-item>
        <a-form-item field="name" label="备注：">
          <a-input v-model="form.remark" placeholder="备注" />
        </a-form-item>
        <a-form-item field="name" label="是否返修:">
          <a-select
            v-model="form.ynWorkLineFlag"
            placeholder="是否返修"
            size="large"
          >
            <a-option value="Y">是</a-option>
            <a-option value="N">否</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="name" label="故障现象：">
          <a-input v-model="form.failureDesc" placeholder="故障现象" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
